import React from 'react'
import GameAIModel from "../../../model/GameAIModel";

const AIResultList = props => {

    const result = props.resultList

    const resultTemplate = result.map((game, index) => {
        const teamStyle = {
            flex: 1,
            fontSize: '12px',
            fontWeight: 600,
            color: 'rgba(51,51,51,1)',
            lineHeight: '16px',
            textAlign: 'center',
        }
        let model = new GameAIModel(game)
        let RQ = model.RQ()
        let DXQ = model.DXQ()
        let SFP = model.SFP()

        let resultMapper = {
            1: '准',
            2: '错',
            3: '走',
        }

        let bgMapper = {
            1: '#FA7268',
            3: '#FFA500',
            2: '#BEBEBE',
        }


        let odd = null
        let RQOdd = <div
            className='AI-result-odd'
            style={{
                backgroundColor: bgMapper[RQ.result],
            }}
        >
                <span>
                    {`${RQ.title}-${RQ.subTitle}：${RQ.resultRate}%`}
                </span>
            <span>
                    {resultMapper[RQ.result]}
                </span>
        </div>

        let SFPOdd = <div
            className='AI-result-odd'
            style={{
                backgroundColor: bgMapper[SFP.result],
            }}
        >
                <span>
                    {`首选：${SFP.first}% 次选：${SFP.second}%`}
                    {/*{`${SFPTitle}：首选-${largest}% 次选--${middle}%`}*/}
                </span>
            <span>
                    {resultMapper[SFP.result]}
                </span>
        </div>

        let DXQOdd = <div
            className='AI-result-odd'
            style={{
                backgroundColor: bgMapper[DXQ.result],
            }}
        >
                <span>
                    {`${DXQ.title}-${DXQ.subTitle}：${DXQ.resultRate}%`}
                </span>
            <span>
                    {resultMapper[DXQ.result]}
                </span>
        </div>

        // 近期预测：胜选规则，优先显示（1、让球  2、胜平负 3、大小球）依次显示
        if (RQ.result !== 2) {
            odd = RQOdd
        } else if (SFP.result !== 2) {
            odd = SFPOdd
        } else {
            odd = DXQOdd
        }

        // let x = (index + 1) % 3
        // if (x === 1) {
        //     odd = RQOdd
        //     if (RQ.result === 2) {
        //         odd = SFP.result === 1 || SFP.result === 3 ? SFPOdd : DXQOdd
        //     }
        // } else if (x === 2) {
        //     odd = SFPOdd
        //     if (SFP.result === 2) {
        //         odd = DXQ.result === 1 || DXQ.result === 3 ? DXQOdd : RQOdd
        //     }
        // } else if (x === 0) {
        //     odd = DXQOdd
        //     if (DXQ.result === 2) {
        //         odd = RQ.result === 1 || RQ.result === 3 ? RQOdd : SFPOdd
        //     }
        // }

        const detail = model.detail()

        return <div
            key={index}
            className='AI-result-ctn'
            // onClick={() => this.props.history.push(`../game/${detail.matchId}`)}
            onClick={(e) => props.goToGame(e, detail)}
        >

            <div
                className='flex-space-between-align-center'
                style={{padding: '8px'}}
            >
                        <span style={{
                            fontSize: '12px',
                            lineHeight: '17px',
                            color: 'rgba(51, 51, 51, 0.4)'
                        }}>
                            {detail.c}
                        </span>
                <span style={{
                    fontSize: '12px',
                    lineHeight: '17px',
                }}>
                        {/*{detail.time}*/}
                    {detail.isToday ? '今天 ' + detail.time : detail.date + ' ' + detail.time}
                    </span>
            </div>

            <div className='flex-center-align-center' style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                width: '100%',
            }}>
                <span style={teamStyle}>{detail.host.name}</span>
                <span> vs </span>
                <span style={teamStyle}>{detail.away.name}</span>
            </div>

            {odd}

        </div>
    })

    return <>
        {resultTemplate}
    </>

}

export default AIResultList
